<template>
  <wf-el-drawer title="" :visible.sync="visible" size="540px">
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="岗位名称：" prop="positionName">{{ form.positionName }}</el-form-item>
      <el-form-item label="岗位类型：" prop="positionType">
        {{ ['普通', '管理'][form.positionType] || '' }}
      </el-form-item>
      <el-form-item label="职责范围：" prop="jobScope">{{ form.jobScope }}</el-form-item>
      <el-form-item label="人员：" prop="positionNumber">{{ form.positionNumber }}</el-form-item>
    </el-form>
    <div class="table-box" style="height: calc(100% - 146px)">
      <wf-el-table
        height="100%"
        :list="list"
        :total="total"
        :loading="loading"
        :current="current"
        @on-page-change="onPageChange"
      >
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="mobilePhone" label="手机号"></el-table-column>
        <el-table-column prop="deptName" label="部门"></el-table-column>
      </wf-el-table>
    </div>
    <div slot="footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </wf-el-drawer>
</template>

<script>
  import { getPositionUserList } from '@/api/position';
  export default {
    data() {
      return {
        visible: false,
        // 原始数据
        rawData: {
          id: 0,
          positionName: '',
          positionType: 0,
          jobScope: '',
          positionNumber: 0,
        },
        form: {},
        list: [],
        total: 0,
        loading: false,
        current: 1,
      };
    },
    methods: {
      open(row) {
        this.form = { ...this.rawData, ...row };
        this.list = [];
        this.total = 0;
        this.current = 1;
        this.initTable();
        this.visible = true;
      },
      async initTable() {
        const params = {
          current: this.current,
          size: 10,
          organizationId: this.form.organizationId,
          positionId: this.form.id,
        };
        this.loading = true;
        const { data } = await getPositionUserList(params);
        const { records, total } = data;
        this.total = total;
        this.list = records;
        this.loading = false;
      },
      onPageChange(data) {
        this.current = data.current;
        this.initTable();
      },
      cancel() {
        this.visible = false;
      },
    },
  };
</script>

<style></style>
